<template>
  <div class="search-hotel">
    <div class="address">
      <div class="name active" @click="selectAddress()">{{ cityName }}</div>
      <div class="current active" @click="getPosition()">
        <image class="icon" src="./images/address.png" mode="scaleToFill" />
        当前位置
      </div>
    </div>

    <Calendar
      @confirm="handleConfirm"
      :dDate="{
        startDate: hotelSearch.searchInfo.startDate,
        endDate: hotelSearch.searchInfo.endDate,
      }"
    >
      <div class="check-date" @click="dateDialogChange(true)">
        <div class="date-item active">
          <div class="title">入住</div>
          <div class="content">{{ showDate.startDate }}</div>
        </div>
        <div class="date-item small">
          <div class="title">&nbsp;</div>
          <div class="content">{{ showDate.roomNight }}晚</div>
        </div>
        <div class="date-item active">
          <div class="title">离店</div>
          <div class="content">{{ showDate.endDate }}</div>
        </div>
      </div>
    </Calendar>

    <div class="input">
      <wd-input
        v-model="searchText"
        :placeholder="`${cityName}的景点、地标、房源`"
        clearable
        no-border
      />
    </div>

    <div class="button active" @click="toHotelList()">搜索民宿</div>
  </div>
</template>
<script lang="ts" setup>
import { getLocation } from '@/utils/index'
import { useHotelSearch } from '@/store/hotelSearch'
import { to } from '@/utils/page'

const emits = defineEmits(['dateDialogState'])
defineOptions({
  name: 'SearchHotel',
})

const cityName = ref('大理市')
const hotelSearch = useHotelSearch()

// 判断之前有没有选择过定位，如果有定位，就不自动定位了
if (hotelSearch.searchInfo.cityName) {
  cityName.value = hotelSearch.searchInfo.cityName
} else {
  getPosition()
}

const searchText = ref<string>('')
const showDate = reactive({
  startDate: '',
  endDate: '',
  roomNight: 1,
})
// 日期确认
function handleConfirm(dateInfo) {
  showDate.startDate = dateInfo.startDate
  showDate.endDate = dateInfo.endDate
  showDate.roomNight = dateInfo.roomNight

  hotelSearch.setSearchInfo({
    startDate: dateInfo.startDate,
    endDate: dateInfo.endDate,
  })
  dateDialogChange(false)
}

// 关闭日期选择
const dateDialogStatus = ref(false)
function dateDialogChange(state) {
  dateDialogStatus.value = state
  emits('dateDialogState', dateDialogStatus.value)
}
function selectAddress() {
  uni.navigateTo({
    url: '/pages/home/region/index',
    events: {
      getBackData(data) {
        cityName.value = data.backData

        hotelSearch.setSearchInfo({
          cityName: data.backData,
        })
      },
    },
  })
}

function toHotelList() {
  hotelSearch.setSearchInfo({
    searchText: searchText.value,
  })

  hotelSearch.setSearchInfo({
    cityName: cityName.value,
    startDate: showDate.startDate,
    endDate: showDate.endDate,
    searchText: searchText.value,
  })

  to('/pages-sub/hotel/list/index')
}

// 获取当前位置
function getPosition() {
  getLocation().then((r: any) => {
    uni.showLoading()
    http
      .get('/region-addr-app/open/getRegionAddr', {
        lat: r.latitude,
        lng: r.longitude,
      })
      .then((res: any) => {
        if (res) {
          cityName.value = res.district
          hotelSearch.setSearchInfo({
            cityName: res.district,
          })
        }
      })
      .finally(() => {
        uni.hideLoading()
      })
  })
}
</script>
<style lang="scss" scoped>
.search-hotel {
  position: relative;
  z-index: 100;
  padding: 48rpx 60rpx 38rpx;

  .address {
    display: flex;
    align-items: center;
    height: 50rpx;
    .name {
      flex: 1;
      width: 0;
      overflow: hidden;
      font-size: 42rpx;
      font-weight: 600;
      line-height: 50rpx;
      color: var(--color1);
      word-break: keep-all;
    }
    .current {
      display: flex;
      align-items: center;
      font-size: 25rpx;
      font-weight: 500;
      color: var(--color4);
      .icon {
        width: 35rpx;
        height: 35rpx;
        margin-right: 4rpx;
      }
    }
  }

  .check-date {
    display: flex;
    margin-top: 58rpx;
    .date-item {
      .title {
        font-size: 25rpx;
        line-height: 30rpx;
        color: var(--color4);
      }
      .content {
        font-size: 35rpx;
        font-weight: 600;
        line-height: 41rpx;
        color: var(--color1);
      }
      &.small {
        flex: 1;
        .content {
          font-size: 27rpx;
          text-align: center;
        }
      }
    }
  }

  .input {
    margin-top: 58rpx;
    :deep(.wd-input) {
      background-color: transparent;
    }
  }

  .button {
    height: 96rpx;
    margin-top: 68rpx;
    font-weight: 600;
    line-height: 96rpx;
    color: #ffffff;
    text-align: center;
    background: #1f2026;
    border-radius: 194rpx;
    box-shadow: 0px 16rpx 28rpx rgba(31, 32, 38, 0.3);
    transition: box-shadow 0.3s;
    &:active {
      box-shadow: 0px 6rpx 18rpx rgba(31, 32, 38, 0.3);
    }
  }
}
</style>
